<!-- 个人中心 -->
<template>
	<view class="container">
		<view style="margin-top: 50rpx;margin-left: 24rpx;">
			<view style="padding: 1rpx 30rpx;min-height: 100rpx;">
				<input v-model="mobile"
					style="font-size: 30rpx;border-bottom: 1px solid #E5E5E5;min-height: 80rpx;" placeholder="请输入手机号" />
			</view>
			<view style="margin-top: 24rpx;padding: 1rpx 30rpx;min-height: 100rpx;position: relative">
				<input style="font-size: 30rpx;border-bottom: 1px solid #E5E5E5;min-height: 100rpx;"
				v-model="captcha"
					placeholder="请输入验证码"></input>
				<view @click="getCode" v-if="!second"
					style="z-index: 99; width: 160rpx;height: 28px;border-radius: 44px 44px 44px 44px;opacity: 1;border: 1px solid #FC5351;position: absolute;right: 24rpx;top: 26rpx;color: #FC5351;display: flex;justify-content: center;align-items: center;font-size: 12px;">
					获取验证码</view>
				<view v-else
					style="width: 160rpx;height: 28px;border-radius: 44px 44px 44px 44px;opacity: 1;border: 1px solid #FC5351;position: absolute;right: 24rpx;top: 26rpx;color: #FC5351;display: flex;justify-content: center;align-items: center;font-size: 12px;">
					{{second}}s</view>
			</view>

		</view>
		<view style="display: flex;justify-content: center;align-items: center;">
			<view class="denglu1" @click="toLogin">
				同意协议并登录
			</view>
		</view>
    <!-- 协议 -->
    <view class=" u-flex u-row-center agreement-box">
      <u-checkbox v-model="protocol" shape="circle" active-color="#FC5351">
        <view class="agreement-text u-flex u-col-center">
          选中登录代表您已同意
          <view class="tcp-text u-flex u-col-center">
            <view @tap.stop="$Router.push({ path: '/pages/public/richtext', query: { id: 0 } })">《用户服务协议》</view>
          </view>
        </view>
      </u-checkbox>
    </view>
    <u-modal :value="isweishenhe" :show-confirm-button="true" @confirm="confirmAudit" :confirm-color="'#FFFFFF'"
             :confirm-style="confirmStyle" :confirm-text="'我知道了'" :title="' '">
      <view class="slot-content">
        <view class="audit_img">
          <image class="audit_img_top" src="@/static/images/5c8352de0bcc21.png"></image>
        </view>
        <view class="audit_title">入驻信息审核中</view>
        <view class="audit_sub_title">请耐心等待工作人员审核</view>
      </view>
    </u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';

	import {  mobilelogin } from "@/api/merchat.js"
	export default {
		components: {

		},
		data() {
			return {
				mobile:'',
				captcha:"",
        second:0,
        protocol:false,
        isweishenhe:false,
        confirmStyle: {
          'width': '69%',
          'margin': '40rpx auto',
          'background': '#D9D9D9 linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%)',
          'border-radius': '60rpx',
          'flex': 'inherit'
        },
			};
		},
		computed: {

		},
		onLoad() {

			// let token = await wechat.getWxMiniProgramSessionKey(true)
			// console.log(token)
		},
		methods: {
      ...mapActions(['getUserInfo', 'showAuthModal']),
      confirmAudit() {
        this.isweishenhe = false;
      },
			toRegister() {
				uni.navigateTo({
					url: 'pages/index/register'
				})
			},
			getCode(){

				let that = this
				that.$http(
					'common.smsSend',
					{
						mobile: that.mobile,
						event: 'mobilelogin'
					},
					'获取验证码中...'
				).then(res => {
					if (res.code === 1) {
					  let timer = null;
            clearInterval(timer);
					  that.second = 60
					  timer = setInterval(()=>{
              that.second-=1;
              if(that.second<1){
                clearInterval(timer)
              }
            },1000)
						that.$u.toast('验证码已发送，请注意查收短信');
					} else {
						that.$u.toast(res.msg);
					}
				});
			},
      closeAuthModal() {
        this.$store.dispatch('showAuthModal');
      },
			toLogin(){

				const that =this
        if(!that.mobile&&!that.$u.test.mobile(this.mobile)){
          that.$u.toast('请输入手机号');
          return
        };
        if(!this.captcha){
          that.$u.toast('请输入验证码');
          return
        };
        that.protocol = true;
				mobilelogin({
						mobile: that.mobile,
						captcha: that.captcha,
						openid:uni.getStorageSync('open_id'),
						user_type:'2'
					}).then(res => {
						console.log(res)
					if (res.code === 1) {
            if(!res.data.userinfo.check_state){
              this.isweishenhe = true;
              return false
            }
            uni.showToast({
              title:'登录成功'
            })
            that.getUserInfo(res.data.userinfo);
            that.closeAuthModal()
            setTimeout(()=>{
              uni.navigateBack({ delta: 2,})
            },800)
					} else {
						that.$u.toast(res.msg);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.container {
		height: 98vh;
	}

	.denglu1 {
		width: 344px;
		height: 44px;
		background: #FC5351;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		font-size: 16px;
		margin-top: 180rpx;
		color: #FFFFFF;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title1 {
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 19px;
		margin-top: 40rpx;
		text-align: center;
	}
  .agreement-box {
    position: fixed;
    bottom: 70rpx;
    width: 100%;
    margin: 80rpx auto 0;

    .protocol-check {
      transform: scale(0.7);
    }

    .agreement-text {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;

      .tcp-text {
        color: #32b9ee;
      }
    }
  }
  .slot-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .audit_img {
      width: 160rpx;
      height: 160rpx;

      .audit_img_top {
        width: 100%;
        height: 100%;
      }
    }

    .audit_title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      line-height: 48rpx;
      margin: 20rpx auto 20rpx;
    }

    .audit_sub_title {
      font-size: 32rpx;
      font-weight: 500;
      color: #999999;
      line-height: 48rpx;
      margin: 10rpx auto 10rpx;
    }
  }
</style>
